import styled from "styled-components";

export const PictureWrapper = styled.div`
  position: relative;
  display: flex;
  height: 600px;
  overflow: hidden;
  cursor: pointer;

  .left-picture {
    flex: 1;
    height: 100%;
    
    .item {
      position: relative;
      height: 100%;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      &:hover{
        img{
           transform: scale(1.08);
         }
       }


      .cover {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: rgba(0,0,0,.3);
        opacity: 0;
        transition: opacity 200ms ease;
      }

      &:hover .cover {
        opacity: 0;
      }
    }
  }

  .right-picture {
    flex: 1;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 2px;
    margin-left: 2px;

    .item {
      position: relative;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      &:hover{
        img{
           transform: scale(1.08);
         }
       }

      .cover {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: rgba(0,0,0,.3);
        opacity: 0;
        transition: opacity 200ms ease;
      }

      &:hover .cover {
        opacity: 0;
        transform: scale(1.08);
      }
    }
  }

  &:hover {
    .item .cover {
      opacity: 1;
    }
  }
  

`;